<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-popover="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" style="padding: 5px 20px 15px">
    <template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="分类管理" name="first">
        <div class="list-content">
        <!--条件筛选-->
        <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">

            <div class="filter-btn fr">
                <el-button type="primary" @click="showDailog">新增菜品分类</el-button>
            </div>
        </div>

        <!--主体表格-->
        <div class="z-tables">
            <el-table ref="multipleTable" :data="cateList" style="width: 100%;">
                <el-table-column fixed label="序号" type="index" class-name="z-opt_btn"></el-table-column>
                <el-table-column prop="categoryName" label="分类名称" min-width="120"></el-table-column>
                <el-table-column prop="categoryImg" label="分类图标" min-width="120"></el-table-column>
                <el-table-column prop="state" label="是否启用" min-width="120"></el-table-column>
                <el-table-column fixed="right" label="创建时间" min-width="180" class-name="table-operate-td">
                    <template slot-scope="scope">
                        <div class="table-info">{{ scope.row.createTime }}</div>
                        <div class="table-operate">
                            <el-button type="primary" @click="editDailog(scope.$index, scope.row)">编辑</el-button>
                            <span class="table-spea-line">|</span>
                            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="grid-content">
            <div class="bg-purple-light">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizeList"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <!-- 新增模态框 -->
        <el-dialog :title="openText" :visible.sync="dialogFormVisible">
            <el-form :model="productcate" :rules="rules" ref="productcate-form" label-width="100px" class="demo-ruleForm el-input-95">
                <el-form-item hidden label="ID" prop="uuid">
                    <el-input v-model="productcate.uuid"></el-input>
                </el-form-item>
                <el-form-item hidden label="vendorId" prop="vendorId">
                    <el-input v-model="productcate.vendorId"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="categoryName">
                    <el-input v-model="productcate.categoryName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
                <el-button @click="save" type="primary">确定</el-button>
                <el-button @click="dislogHide">取消</el-button>
            </div>
            <div slot="footer" class="dialog-footer" id="editDialog" style="display: none">
                <el-button @click="update" type="primary">确定</el-button>
                <el-button @click="dislogHide">取消</el-button>
            </div>
        </el-dialog>
    </div>
    </el-tab-pane>
    <el-tab-pane label="菜品管理" name="second">
        菜品管理
    </el-tab-pane>
  </el-tabs>
</template>
</div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            openText: "",
            activeName: 'first',
            dialogFormVisible: false,
            cateList:[],
            vendorUuid:[[${vendorUuid}]],
            valueId: '',
            valueState: '',
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "vendorId": {
                    "operation": "EQ",
                    "value": [[${vendorUuid}]]
                }
            },
            dialogVisible: false,
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            productcate:{}
        },
        created: function () {
            this.queryList();
        },
        methods: {
            dislogHide: function () {
                this.dialogFormVisible = false;
            },
            save: function () {
                var self = this;
                self.$refs['productcate-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/productcate/add",
                            type: "POST",
                            data: JSON.stringify(self.productcate),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '新增菜品分类成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/productcate/tolist?vendorUuid='+self.vendorUuid;
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '新增菜品分类失败',
                                        type: 'error',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/productcate/tolist?vendorUuid='+self.vendorUuid;
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            update: function () {
                var self = this;
                self.$refs['productcate-form'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "/backstage/cater/productcate/edit",
                            type: "POST",
                            data: JSON.stringify(self.productcate),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function(data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        message: '编辑菜品分类成功',
                                        type: 'success',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/productcate/tolist?vendorUuid='+self.vendorUuid;
                                        }
                                    });
                                } else {
                                    self.$message({
                                        message: '编辑菜品分类失败',
                                        type: 'error',
                                        duration: 1000,
                                        customClass: 'message-center',
                                        onClose: function () {
                                            window.location.href = '/backstage/cater/productcate/tolist?vendorUuid='+self.vendorUuid;
                                        }
                                    });
                                }
                            }
                        });
                    }
                });
            },
            showDailog: function () {
                this.dialogFormVisible = true;
                this.openText = "新增菜品分类";
                $("#addDialog").css('display','block');
                $("#editDialog").css('display','none');
                this.productcate.uuid = '';
                this.productcate.categoryName = '';
                this.productcate.vendorId = this.vendorUuid;
            },
            editDailog: function(index,row){
                this.dialogFormVisible = true;
                this.openText = "编辑菜品分类";
                $("#addDialog").css('display','none');
                $("#editDialog").css('display','block');
                this.productcate = row;
            },
            identityFormatter: function (row, column, cellValue, position) {
                for (let identity of this.identityList) {
                    if (identity.value === cellValue) {
                        return identity.name;
                    }
                }
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions.entityNo.value = undefined;
                this.conditions.state.value = undefined;
            },
            // 删除桌台
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此分类信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                    url: "/backstage/cater/productcate/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.$message({
                                message: '删除菜品分类成功',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            self.handleQuery();
                        } else {
                            self.$message({
                                message: '删除菜品分类失败',
                                type: 'warning',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            });
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            // 列表批量操作2-批量导出
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            queryList() {
                app.loading = true;
                let queryMessage = {
                    "queryPage": this.currentPage,
                    "pageShow": this.pageSize,
                    "queryParams": this.conditions,
                    "sortMap": {
                        "uuid": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/cater/productcate/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            app.cateList = data.returnMessage;
                            app.totalNum = data.pager.totalNum;
                        }
                        app.loading = false;
                    }
                });
            }
        }
    });

</script>
</html>